let boxPages=document.querySelectorAll("#container #box div")
console.log(boxPages)
for (let i=0;i<boxPages.length;i++)
{
    
    for(let r=0;r<3;r++)
    {
        for(let c=0;c<3;c++)
        {
            let element = document.createElement("div")
            if(i==0){
                element.style.cssText="width:100px;height:100px;border:1px solid white;background-color: transparent;position: absolute;background-image: url(img/a0.jpg);background-size: 300px 300px;"
            }
            if(i==1){
                element.style.cssText="width:100px;height:100px;border:1px solid white;background-color: transparent;position: absolute;background-image: url(img/a1.jpg);background-size: 300px 300px;"
            }
            if(i==2){
                element.style.cssText="width:100px;height:100px;border:1px solid white;background-color: transparent;position: absolute;background-image: url(img/a2.jpg);background-size: 300px 300px;"
            }
            if(i==3){
                element.style.cssText="width:100px;height:100px;border:1px solid white;background-color: transparent;position: absolute;background-image: url(img/a3.jpg);background-size: 300px 300px;"
            }
            if(i==4){
                element.style.cssText="width:100px;height:100px;border:1px solid white;background-color: transparent;position: absolute;background-image: url(img/a4.jpg);background-size: 300px 300px;"
            }
            if(i==5){
                element.style.cssText="width:100px;height:100px;border:1px solid white;background-color: transparent;position: absolute;background-image: url(img/a5.jpg);background-size: 300px 300px;"
            }
            boxPages[i].appendChild(element)
            element.style.backgroundPositionX=-c*100+"px"
            element.style.backgroundPositionY=-r*100+"px"
            element.style.top=r*100+"px"
            element.style.left=c*100+"px"
        }
    }
}
